<template>
	<view class="goodsdetail">
		<view class="banner">
			<swiper class="uni-swiper" :indicator-dots="true" circular="true" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in goodsinfo.banner" :key='index'>
					<view class="swiper-item">
						<image :src="getimg(item)" mode="widthFix"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="goodsinfo">
			<view class="name">
				{{goodsinfo.name}}
			</view>
			<view class="content">
				{{goodsinfo.introduction}}
			</view>
			<view class="specs">
				<view class="vip_price" v-if="goodsinfo.goods_type == 2">
					<view class="price">
						零售价：<text class="pricenum">￥{{Number(goodsinfo.price)}}</text> / {{goodsinfo.unit}}

					</view>
					<view class="price vip">
						会员价：<text class="pricenum">￥{{Number(goodsinfo.vip_price)}}</text> / {{goodsinfo.unit}}

					</view>
				</view>
				<view class="vip_price" v-if="goodsinfo.goods_type == 3">

					<view class="price vip">
						体验价：<text class="pricenum">￥{{Number(goodsinfo.price)}}</text> / {{goodsinfo.unit}}

					</view>
				</view>
				<view class="num">
					累计售量：{{goodsinfo.sell}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				产品详情
			</view>
			<view class="msg" v-html="getContent(goodsinfo.detail)">
				<!-- <image src="/static/index/video1.png" mode=""></image>
				<image src="/static/index/video2.png" mode=""></image> -->
			</view> 
		</view>
		<view class="footer">
			<view class="left">
				<image src="/static/index/cart_k.png" @click="toCart" mode=""></image>
			</view>
			<view class="right">
				<view class="joincart" @click="AddCart(goodsinfo)" v-if="goodsType">
					加入购物车
				</view>
				<view class="buynow" @click="toPage('/pages/orderfound/index?type=2&goods_id='+goodsinfo.id)">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GoodsDetail,
		AddCart
	} from '../../api/api.js'
	import {
		checkLogin
	} from '../../api/login.js'
	export default {
		data() {
			return {
				goodsid: 0,
				goodsinfo: {
					id: 1,
					// banner: ['/static/index/goods2.png', '/static/index/goods1.png', '/static/index/goods2.png'],
					banner: [],
					name: '',
					detail: '',
					price: 0,
					tips: '件',
					sell: 0,
					goodsType: false
				}
			}
		},
		onLoad(e) {
			this.goodsid = e.id
			this.GoodsDetail()
		},
		methods: {
			toCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			AddCart(data) {
				AddCart({
					goods_id: data.id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			},
			GoodsDetail() {
				GoodsDetail({
					id: this.goodsid
				}).then(res => {
					console.log(res)
					if (res.status == 1) {
						this.goodsinfo = res.data

						if (this.goodsinfo.goods_type == 3) {
							this.goodsType = false
						} else {
							this.goodsType = true
						}
					}
				})
			},
			toPage(url) {
				console.log(checkLogin())
				if (!checkLogin()) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			getimg(url) {
				return this.websiteUrl + url
			},
			getContent(res) {
				if (typeof(res) == 'string') {
					// 正则替换
					return res = res.replace(/src=\"\/ueditor\/php/g,
						'style="max-width:100%" src="' + this.websiteUrl + '/ueditor/php')

				}
			}
		}
	}
</script>

<style lang="scss">
	.uni-swiper {
		height: 750rpx;

		.swiper-item {
			image {
				width: 100%;
				
			}
		}
	}

	.goodsinfo {
		background: #fff;
		padding: 25rpx;

		.name {
			letter-spacing: 1px;
		}

		.content {
			font-size: 14px;
			color: #777;
			margin-top: 6px;
			max-height: 40px;
			line-height: 20px;
			overflow: hidden;
		}

		.specs {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.vip_price {
				display: flex;
				flex-direction: column;
			}

			.price {
				font-size: 14px;


				.pricenum {
					font-weight: bold;
					color: #777;
					margin-right: 10rpx;
					font-size: 14px;
				}

			}

			.vip {
				.pricenum {
					color: #FF5A00;
					font-size: 18px;
				}
			}

			.num {
				background: #efefef;
				padding: 10rpx 30rpx;
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #777;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
			}
		}
	}

	.detail {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		min-height: 200rpx;
		padding-bottom: 130rpx;

		.title {
			text-align: center;
			padding: 30rpx;
			color: #777;
		}

		image {
			width: 92%;
			margin-left: 4%;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: #fff;
		box-shadow: 0 -1px 3px #dddddd;

		.left {
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			color: #fff;
			text-align: center;
			justify-content: flex-end;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 16px;
			letter-spacing: 1px;

			.joincart {
				width: 50%;
				background: #FFB049;
			}

			.buynow {
				width: 50%;
				background: #FF5A00;
			}
		}
	}
</style>
